<template>
  <div class="mod-purchasedetail">
    <data-table ref="dataTableRef" :criterias="table.criterias" :initLoad="true" name="purchasedetail" url="/ware/purchase-detail/select">
      <!-- ----------------------------------------- 查询条件 ----------------------------------------- -->
      <template v-slot:search="criterias">
        <dt-search-item label="仓库">
          <wareinfo-select v-model="criterias.wareId"></wareinfo-select>
        </dt-search-item>
        <dt-search-item label="采购状态">
          <el-select v-model="criterias.status" clearable>
            <el-option label="新建" value="0"></el-option>
            <el-option label="已分配" value="1"></el-option>
            <el-option label="正在采购" value="2"></el-option>
            <el-option label="已完成" value="3"></el-option>
            <el-option label="采购失败" value="4"></el-option>
          </el-select>
        </dt-search-item>
        <dt-search-item label="检索信息">
          <el-input v-model="criterias.content" maxlength="50" placeholder="请输入SKUID/采购单ID"></el-input>
        </dt-search-item>
      </template>
      <!-- ------------------------------------------ 工具栏 ------------------------------------------ -->
      <template v-slot:toolbar>
        <el-button-group>
          <el-button v-if="admin.isAuth('ware:purchase-detail:save')" @click="() => addDataEvent()" type="primary">
            新增
          </el-button>
          <el-button v-if="admin.isAuth('ware:purchase-detail:save')" @click="() => updateDataEvent()" type="warning">
            修改
          </el-button>
          <el-button v-if="admin.isAuth('ware:purchase-detail:delete')" @click="() => deleteDataEvent()" type="danger">
            删除
          </el-button>
          <el-button v-if="admin.isAuth('ware:purchase-detail:merge')" @click="() => combinePurchaseEvent()" type="success">
            合并整单
          </el-button>
        </el-button-group>
      </template>
      <!-- ---------------------------------------- 数据表格列 ---------------------------------------- -->
      <el-table-column fixed prop="skuId" align="center" label="SKUID" width="260" />
      <el-table-column prop="num" align="right" label="采购数量" width="120" />
      <el-table-column prop="price" align="right" label="采购金额" width="120" />
      <el-table-column prop="wareName" align="left" label="仓库名称" width="280" show-overflow-tooltip />
      <el-table-column prop="purchaseId" align="center" label="采购单ID" width="260" />
      <el-table-column prop="status" align="center" label="采购状态" width="160">
        <template #default="scope">
          <el-tag v-if="scope.row.status === 0">新建</el-tag>
          <el-tag v-if="scope.row.status === 1">已分配</el-tag>
          <el-tag v-if="scope.row.status === 2">正在采购</el-tag>
          <el-tag v-if="scope.row.status === 3">已完成</el-tag>
          <el-tag v-if="scope.row.status === 4">采购失败</el-tag>
        </template>
      </el-table-column>
    </data-table>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdateRef" @loadTableData="loadTableData"></add-or-update>
    <purchasedetail-combine v-if="combineVisible" ref="purchasedetailCombineRef" @loadTableData="loadTableData"></purchasedetail-combine>
  </div>
</template>
<script lang="ts" setup>
import admin from "@/utils/admin";
import { ElMessage } from "element-plus";
import { ref, nextTick, reactive } from "vue";

import WareinfoSelect from "../common/wareinfo-select.vue";
import AddOrUpdate from "./purchasedetail-add-or-update.vue";
import PurchasedetailCombine from "./purchasedetail-combine.vue";

// 数据表格
const table = reactive({
  criterias: {
    wareId: "",
    status: "",
    content: "",
  },
});

const combineVisible = ref(false);

const addOrUpdateVisible = ref(false);

// 数据表格引用
const dataTableRef = ref();

// 弹窗引用
const addOrUpdateRef = ref();

// 合并整单弹窗引用
const purchasedetailCombineRef = ref();

// 新增
const addDataEvent = async () => {
  addOrUpdateVisible.value = true;
  await nextTick();
  addOrUpdateRef.value.initForm("add");
};

// 修改
const updateDataEvent = async () => {
  // 验证并获取是否选择一条数据
  let data = admin.obtainOneSelectionTableData(dataTableRef.value);
  if (!data) {
    return;
  }
  addOrUpdateVisible.value = true;
  await nextTick();
  addOrUpdateRef.value.initForm("update", data);
};

// 删除
const deleteDataEvent = () => {
  admin.batchDeleteSelectionTableData(dataTableRef.value, "/ware/purchase-detail/delete");
};

// 合并整单
const combinePurchaseEvent = async () => {
  let selection = dataTableRef.value.getSelection();
  if (!selection || selection.length <= 0) {
    ElMessage.error("请选择要操作的数据！");
    return;
  }
  // 只能合并同一仓库的采购单需求
  let wareId;
  let purchasedetailIds = [];
  for (let i = 0; i < selection.length; i++) {
    purchasedetailIds.push(selection[i].id);
    if (!wareId) {
      wareId = selection[i].wareId;
      continue;
    }
    if (wareId !== selection[i].wareId) {
      ElMessage.error("请选择同一仓库的采购需求！");
      return;
    }
    if (selection[i].status !== 0) {
      ElMessage.error("请选择新建状态的采购需求！");
      return;
    }
  }
  combineVisible.value = true;
  await nextTick();
  purchasedetailCombineRef.value.initForm({
    wareId: wareId,
    purchasedetailIds: purchasedetailIds,
  });
};

// 表格数据加载
const loadTableData = () => {
  dataTableRef.value.loadTableData();
};
</script>
